<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: blueviolet;
        }
        p{
            display: block;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        a{
            width: 100px;
            height: 100px;
            display: block;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 

        事件对象：事件发生的很多数据  存储在事件对象里面
         event  事件对象  默认通过事件函数形参传递的

        阻止冒泡:
        event.stopPropagation()    
        IE 6-8事件对象的获取  window.event 获取对象
            e.cancelBubble=true  阻止事件冒泡
        事件委托：

     -->
     <div id='grandFather'>
         <p id="father">
             <a id="son" href="http://baidu.com">这是超链接</a>
         </p>
     </div>
    <script>
        var a=document.getElementById('son')
        a.onclick=function(event)
        {
            // console.log("超链接被点击了");
            // console.log(e);
            // alert("a标签被点击了")
            // event.stopPropagation();//阻止事件冒泡
            var ee=event||window.event;
            alert('这是son a标签的点击事件函数')
            if(ee.cancelBubble)
            {
                ee.cancelBubble=true;  //IE 里面阻止事件冒泡的写法
            }else{
                ee.stopPropagation()  //阻止事件冒泡
            }
            return false;
            e.preventDefault()//阻止事件的默认行为 ////阻止a链接的跳转
        }
        var p=document.getElementById("father")
        p.onclick=function()
        {
            alert("这是a的父节点p标签的单击事件函数!")
        }
    </script>
    
</body>
</html>